<template>
  <div class="applicationReminderContainer">
    <!-- 温馨提示 -->
    <el-card class="card"
             shadow="never">
      <el-form :rules="rules"
               ref="form"
               :model="form"
               class="ruleForm">
        <el-row :gutter="5">

          <el-col v-bind="styleResponsive ? { lg: 12, md: 24 } : { span: 24 }">

            <div class="withdrawalForm">
              <el-form-item label="是否开启提现"
                            prop="withdrawal_switch">
                <el-radio-group v-model="form.withdrawal_switch">
                  <el-radio value="1"
                            label="1">开启</el-radio>
                  <el-radio value="2"
                            label="2">隐藏</el-radio>

                </el-radio-group>
              </el-form-item>
              <el-form-item label="提现方式"
                            prop="withdrawal_mode">
                <el-radio-group v-model="form.withdrawal_mode">
                  <el-radio value="1"
                            label="1">支付宝</el-radio>
                  <el-radio value="2"
                            label="2">微信</el-radio>
                  <el-radio value="3"
                            label="3">全部</el-radio>

                </el-radio-group>
              </el-form-item>
              <!-- 支付宝自定义名称 -->
              <div>

                <el-form-item label="最低额度:"
                              prop="withdrawal_condition">
                  <el-input min="0"
                            type="number"
                            clearable
                            v-model="form.withdrawal_condition"
                            placeholder="请输入申请的提现额度"> <template slot="append">元</template></el-input>
                  <div style="color: #b4b4b4"></div>
                </el-form-item>

                <!-- 提现手续费率 -->

                <el-form-item label="提现手续费率"
                              prop="withdrawal_fees_ratio">
                  <el-input min="0"
                            max="100"
                            type="number"
                            clearable
                            v-model="form.withdrawal_fees_ratio"
                            placeholder="请输入申请提现手续费"> <template slot="append">%</template></el-input>
                  <div style="color: #b4b4b4">注意:【提现时扣除的提现手续费,0为不扣除提现手续费】</div>
                </el-form-item>
                <el-form-item :label="'兑换比例('+configBS?.currency_name+')'"
                              prop="recharge_ratio">
                  <el-input min="0"
                            type="number"
                            clearable
                            v-model="form.recharge_ratio"
                            :placeholder="'请输入'+configBS?.currency_name+'兑换比例'"></el-input>
                  <div style="color: #b4b4b4">注意:多少{{configBS?.currency_name}}可兑换一元</div>
                </el-form-item>
                <!-- 每日提现次数 -->
                <el-form-item label="每日提现次数"
                              prop="everyday_withdrawal_num">
                  <el-input min="0"
                            type="number"
                            clearable
                            v-model="form.everyday_withdrawal_num"
                            placeholder="请输入每日申请提现次数" />
                  <div style="color: #b4b4b4">注意:【每日额度可提现次数】</div>
                </el-form-item>
                <el-form-item label="每日提现金额"
                              prop="everyday_withdrawal_amount">
                  <el-input min="0"
                            type="number"
                            clearable
                            v-model="form.everyday_withdrawal_amount"
                            placeholder="请输入每日提现金额" />
                  <div style="color: #b4b4b4">注意:【每日额度可提现金额】</div>
                </el-form-item>

              </div>

              <!-- 提交 重置 -->
              <div class="drawer__footer">
                <el-button @click="resetForm('form')"
                           type="plain">重置</el-button>
                <el-button type="primary"
                           :loading="loading"
                           @click="save('form')">提交</el-button>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>

    </el-card>
  </div>
</template>
	<script>


import { config, configEdit } from '@/api/config/index'
export default {
  name: 'applicationReminder',
  components: {},
  data () {
    return {
      configBS: JSON.parse(localStorage.getItem('config')),
      content: '',
      isUpdate: false,
      loading: false,
      modalPic: false,
      isChoice: '单选',
      form: {
        // 1 开启 2关闭
        withdrawal_switch: '1',
        // 1 支付宝 2微信
        withdrawal_mode: '1',
        // 提现积分换换比

        // 用户需多少金额才可提现
        withdrawal_condition: '',
        // 提现手续费
        withdrawal_fees_ratio: '',
        // 每日提现次数
        everyday_withdrawal_num: '',
        // 每日提现金额
        everyday_withdrawal_amount: '',
        // 1人民币可提多少
        recharge_ratio: '',
        // 最高额度
        //   maximumAmount: '',

      },

      receivingAccountOption: [],
      rules: {
        withdrawal_switch: [
          {
            required: true,
            message: '是否隐藏提现配置',
            trigger: 'blur'
          }
        ],
        withdrawal_mode: [
          {
            required: true,
            message: '请选择提现方式',
            trigger: 'blur'
          }
        ],

        recharge_ratio: [
          { required: true, message: '请输入可兑换' + JSON.parse(localStorage.getItem('config')).currency_name + '比例', trigger: 'blur' }
        ],
        withdrawal_condition: [
          { required: true, message: '请输入最低提现额度', trigger: 'blur' }
        ],
        withdrawal_fees_ratio: [
          { required: true, message: '请输入提现手续费', trigger: 'blur' }
        ],
        everyday_withdrawal_num: [
          { required: true, message: '请输入提现次数', trigger: 'blur' }
        ],
        everyday_withdrawal_amount: [
          { required: true, message: '请输入最高提现额度', trigger: 'blur' }
        ],

      }
    };
  },
  // 路由刷新
  activated () {
    this.query();
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    async query () {
      const res = await config();
      this.current = res.data;

      if (this.current) {
        this.$util.assignObject(this.form, {
          ...res.data
        });
        this.isUpdate = true;
      } else {
        this.isUpdate = false;
      }
    },


    // 新增
    save () {
      this.$refs['form'].validate((valid) => {

        if (!valid) {
          return false;
        }
        this.loading = true;
        console.log(this.form);

        configEdit(this.form)
          .then((msg) => {
            console.log(msg);
            this.loading = false;
            this.$message.success(msg.message);
            this.query();
          })
          .catch((e) => {
            this.loading = false;
            this.$message.error(e.message);
          });
      });
    },

    resetForm () {
      this.$nextTick(() => {
        this.$refs['form'].resetFields();
        console.log(this.form);
      });
    }
  }
};
	</script>
	<style lang="less" scoped>
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
/deep/.el-upload--picture-card {
  line-height: 187px;
}
.applicationReminderContainer {
  min-width: 630px;
  .box-card {
    .clearfix:before,
    .clearfix:after {
      display: table;
      content: '';
    }
    .clearfix:after {
      clear: both;
    }
    .clearfix {
      padding: 0px 0 0 30px;
    }
  }

  .applicationInfo {
    display: flex;
    justify-content: space-evenly;
    span {
      color: #757575;
      font-size: 18px;
    }
    div {
      margin: 7px 0 7px 0;
      color: #1e6ceb;

      font-size: 28px;
    }
  }
  .prompt {
    width: 100%;
    .Tips {
      color: #000;
      font-family: Inter;
      font-size: 20px;
      margin-bottom: 17px;
    }
    padding: 20px 30px 0 30px;
    box-sizing: border-box;
    overflow: hidden;
    .text {
      margin-top: 30px;
      white-space: wrap;
      margin-bottom: 10px; /* 调整间隔大小 */
      min-width: 490px;
      line-height: 1.5;
    }
  }
  .withdrawalForm {
    padding: 20px 30px 35px 30px;
    box-sizing: border-box;
    width: 100%;
    @media screen and (min-width: 1200px) {
      border-left: 1px solid #ebebeb;
    }

    .ruleForm {
      .el-form-item {
        width: 100% !important;
        .el-select {
          width: 100%;
        }
      }
      .drawer__footer {
        margin-top: 38px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
      }
    }
  }
}
</style>
	